<!DOCTYPE html>
<html xmlns:v-bind="http://www.baidu.com">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <style type="text/css">
        .hide {
            width: 100px;
            height: 200px;
            background: red;
        }

        .hide2 {
            width: 100px;
            height: 200px;
            background: blue;
        }
    </style>


</head>
<body>
<div id="box">
    <div class="hide">1</div>
    <hr>
    <div v-bind:class="cls">2</div>
    <hr>
    <div v-bind:class="[cls]">3</div>
    <hr>
    <div :class="{hide:status}">4</div>
    <a :href='addr'>淘宝</a>
    <a :href="addr2" :musen='musen'>百度</a>
</div>


<script type="text/javascript">
    /**
     * v-bind  可以简写为 :
     * v-bind:属性值 = 绑定的数据
     */
    var vue = new Vue({
        el: '#box',
        data: {
            cls: 'hide',
            status: true,
            addr: 'http://www.taobao.com',
            addr2: 'http://www.baidu.com',
            musen: '1234'
        }
    })
</script>
</body>
</html>
